<template>
	<view class="bottom_content" :class="{bottom_content_index:is_show}">
		<view class="show_bg" v-show="is_show" @tap="switchBtn" catchtouchmove="false">
			<view class="show_bg_content">
				<view class="show_bg_item" @tap.stop="switchBtn(0)">
					<view class="show_head_video"><i class="iconfont iconjiashipin"></i></view>
					<view class="text">发视频</view>
				</view>
				<view class="show_bg_item" @tap.stop="switchBtn(1)">
					<view class="show_head_art"><i class="iconfont icontianjiatupian"></i></view>
					<view class="text">发文章</view>
				</view>
			</view>
			<view class="show_bg_btn"><i class="iconfont iconguanbi"></i></view>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<navigator class="bottomView" :class="[buttomIndex == 0 ? 'buttom_active' : '']" hover-class="none" url="/pages/free-lesson/free-index">
				<i class="iconfont iconketang"></i>
				<text>名师课堂</text>
			</navigator>
			<view class="bottomView" :class="[buttomIndex == 1 ? 'buttom_active' : '']">
				<i class="iconfont iconicon-test" @tap="switchBtn"></i>
				<text>发布</text>
			</view>
			<navigator class="bottomView" :class="[buttomIndex == 2 ? 'buttom_active' : '']" hover-class="none" url="/pages/school/my-center?users_type=3">
				<i class="iconfont iconwode-xuanzhong"></i>
				<text>我的</text>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_show: false
			}
		},
		props: {
			buttomIndex: Number
		},
		methods: {
			/* 切换发布状态 */
			switchBtn(type) {
				this.is_show = !this.is_show;
				var url = '';
				if(type == 0) {
					url = 'release'
				} else if (type == 1) {
					url = 'article-release?stateType=0'
				}
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.bottom_content {
		position: fixed;
		bottom: 0;
	}
	
	.bottom_content_index{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
	}
	
	/* 蒙版 */
	.show_bg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
		background-color: rgba(0,0,0,0.5);
	}
	
	.show_bg_content{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 120upx;
		margin: 40upx 200upx;
		width: calc(100% - 400upx);
		
		.show_bg_item{
			color: #FFFFFF;
			font-size: 26upx;
			text-align: center;
			
			.show_head_video{
				width: 92upx;
				height: 92upx;
				line-height: 92upx;
				background:linear-gradient(180deg,rgba(104,229,131,1) 0%,rgba(38,201,157,1) 100%);
				border-radius: 50%;
				& i {
					font-size: 70upx;
				}
			}
			.show_head_art{
				width: 92upx;
				height: 92upx;
				line-height: 92upx;
				background: linear-gradient(360deg,rgba(254,118,91,1) 0%,rgba(254,185,104,1) 100%);
				border-radius: 50%;
				& i {
					font-size: 40upx;
				}
			}
		}
	}
	
	.show_bg_btn{
		position: fixed;
		bottom: 44upx;
		left: calc(50% - 44upx);
		text-align: center;
		width: 80upx;
		height: 80upx;
		line-height: 40px;
		border-radius: 50%;
		background: linear-gradient(360deg,rgba(254,118,91,1) 0%,rgba(254,185,104,1) 100%);
		box-shadow: 0px 6upx 12upx rgba(0, 0, 0, 0.16);
		
		& i {
			color: #FFFFFF;
			font-size: 40upx;
		}
	}
	

	/* 底部 */
	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background: #FFFFFF;
		border-top: 1upx solid #E5E5E5;
		z-index: 9;
	}
	
	.bottomView{
		width: 33%;
		text-align: center;
		& i {
			color: #8E8E93;
			font-size: 40upx;
			line-height: 1.2;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		& text{
			color: #8E8E93;
			font-size: 22upx;
		}
	}
	
	.iconicon-test {
		color: #FFFFFF !important;
		font-size: 40upx !important;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		margin-top: -20upx;
		background:linear-gradient(360deg,rgba(254,118,91,1) 0%,rgba(254,185,104,1) 100%);
		box-shadow: 0px 6upx 12upx rgba(0, 0, 0, 0.16);
		margin-left: calc(50% - 40upx);
	}
	
	.buttom_active {
		& i, 
		& text {
			color: #FF9900 !important;
		}
		.iconicon-test {
			color: #FFFFFF !important;
		}
	}
</style>
